上一篇先拆到這裡：

npm run dev
↓
npm 讀 package.json
↓
找到 scripts.dev
↓
得到 "vite"

但我卡在一個很基本的問題。

package.json 裡明明只有：

"dev": "vite"

沒有寫：

vite 到底放在哪裡

那電腦怎麼知道要去哪裡找這個 vite？

這篇我想真的把「它去哪裡找」看出來。

先確認 Vite 的確在這個專案裡

先打開專案自己的：

package.json

找到 devDependencies，會看到類似：

"devDependencies": {
  "vite": "^8.2.2"
}

版本號可能和我的不一樣，沒關係。重點是：Vite 是這個專案安裝的套件。

安裝下來的套件會出現在：

node_modules/

但 node_modules 裡一大堆資料夾，shell 不可能看到 vite 三個字就從頭到尾亂翻吧？

先認識 PATH：shell 的搜尋清單

這裡第一次碰到 PATH。

我以前對它的印象很模糊，只知道好像跟「找得到指令」有關。

可以先把它理解成：

PATH 是一張有順序的資料夾清單；shell 要找外部 command 時，會按照這個順序去找。

例如概念上像：

第一個資料夾
第二個資料夾
第三個資料夾
...

當 shell 收到：

vite

就會從前面的資料夾開始找有沒有叫 vite 的 command。

跟著做 1：把 npm script 裡的 PATH 印出來

在專案資料夾輸入：

npm run env | grep '^PATH='

你會看到很長一串，可能像：

PATH=/.../vite-why-lab/node_modules/.bin:/.../node_modules/.bin:...:/usr/bin:/bin:...

如果第一次看到很崩潰，很正常。我一開始也只看到一條超長的東西。

這裡先只抓兩件事：

1. 冒號 : 是不同資料夾之間的分隔符號。
2. 很前面通常會看到目前專案的：

node_modules/.bin

所以概念上可以拆成：

目前專案/node_modules/.bin
其他資料夾
...
/usr/bin
/bin

這就開始有線索了。

跟著做 2：直接問「這次的 vite 在哪？」

如果你在 macOS／Linux，可以暫時在 package.json 的 scripts 裡加一個：

"where-vite": "command -v vite"

例如：

"scripts": {
  "dev": "vite",
  "where-vite": "command -v vite"
}

存檔後執行：

npm run where-vite

通常會看到類似：

/Users/你的帳號/.../node_modules/.bin/vite

這個實驗很有意思，因為它直接把 Day 2 的答案攤在你面前：

npm script 執行時，shell 找到的是專案裡 node_modules/.bin/vite 這個 command 入口。

做完後可以把 where-vite 這個臨時 script 刪掉。

所以 shell 怎麼找到 vite？

現在再回頭看：

"dev": "vite"

流程可以先理解成：

npm run dev
↓
npm 讀 package.json
↓
找到 scripts.dev
↓
得到 "vite"
↓
npm 執行 script 時準備 PATH
↓
node_modules/.bin 被排到很前面
↓
shell 按 PATH 搜尋 vite
↓
找到 node_modules/.bin/vite

這就是我原本漏掉的一層。

不是 npm 看到 vite 四個字，就神奇地知道 Vite 在哪裡；中間還有 PATH 在告訴 shell：

可以去這些資料夾找 command。

一個容易搞混的地方

npm 放進 PATH 的不是：

vite

也不是整個：

node_modules

而是：

node_modules/.bin

shell 再到這個資料夾裡找：

vite

也就是：

node_modules/.bin/vite

今天先串到這裡

npm run dev
↓
scripts.dev = "vite"
↓
npm 執行 script 時準備 PATH
↓
node_modules/.bin 排在前面
↓
shell 按 PATH 搜尋 vite
↓
找到 node_modules/.bin/vite

到這裡又跑出下一個問題。

node_modules/.bin/vite ？？

下一篇繼續。

試試看

不要看上面的流程，試著完成：

scripts.dev = "vite"
↓
npm 執行 script 時準備 ______
↓
其中 ______ 被排到前面
↓
shell 找到 ______

另外再自己跑一次：

npm run env | grep '^PATH='

和：

npm run where-vite